<template>
  <div
    :class="[
      'work-in-process-root',
      state.isFinally ? 'work-in-process-root-finally' : '',
    ]"
  >
    <el-tooltip
      v-if="state.hasToTop"
      content="向前追溯"
      effect="dark"
      placement="top"
    >
      <div class="work-in-process-top">
        <el-icon><Top /></el-icon>
      </div>
    </el-tooltip>
    <div class="work-in-process-title">
      【 {{ state.productData.invcode }} 】{{ state.productData.invname }}
      <el-tag type="info">产成品</el-tag>
    </div>
    <div class="work-in-process-content-root">
      <div class="work-in-process-content">
        <div class="work-in-process-item" style="justify-content: flex-start">
          物料类型:
          <div style="width: 6px"></div>
          <span class="item-span">{{ state.productData.invtype }}</span>
        </div>
        <div class="work-in-process-item" style="justify-content: flex-start">
          物料型号:
          <div style="width: 6px"></div>
          <span class="item-span">{{ state.productData.invspec }}</span>
        </div>
        <!-- <div class="work-in-process-item" style="justify-content: flex-start">
          物料条码:
          <div style="width: 6px"></div>
          <span class="item-span">{{ state.productData.barcode }}</span>
        </div> -->
        <div class="work-in-process-item" style="justify-content: flex-start">
          物料批次:
          <div style="width: 6px"></div>
          <span class="item-span">{{ state.productData.invbatch }}</span>
        </div>
        <div class="work-in-process-item" style="justify-content: flex-start">
          入库数量:
          <div style="width: 6px"></div>
          <span class="item-span">{{ state.productData.rkQty }}</span>
        </div>
        <div class="work-in-process-item" style="justify-content: flex-start">
          入库仓库:
          <div style="width: 6px"></div>
          <span class="item-span">{{ state.productData.whName }}</span>
        </div>
        <div class="work-in-process-item" style="justify-content: flex-start">
          操作人员:
          <div style="width: 6px"></div>
          <span class="item-span">
            {{ state.productData.createUser }}
          </span>
        </div>
        <div class="work-in-process-item" style="justify-content: flex-start">
          操作时间:
          <div style="width: 6px"></div>
          <span class="item-span">
            {{ state.productData.createTime }}
          </span>
        </div>
        <!-- <div class="work-in-process-item-root">
          <div class="work-in-process-item" style="flex: 2">
            批次:
            <span class="item-span">{{ state.productData.invbatch }}</span>
          </div>
          <div class="work-in-process-item" style="flex: 3">
            可用数量:
            <span class="item-span">{{ state.productData.ky_qty }}</span>
          </div>
        </div> -->
        <!-- <div class="work-in-process-item-root">
          <div class="work-in-process-item" style="flex: 2">
            领用数量:
            <span class="item-span">{{ state.productData.qty }}</span>
          </div>
          <div class="line-space"></div>
          <div class="work-in-process-item" style="flex: 3">
            报工数量:
            <span class="item-span">{{ state.productData.report_qty }}</span>
          </div>
        </div> -->
        <!-- <div class="work-in-process-item-root">
          <div class="work-in-process-item" style="flex: 2">
            报废数量:
            <span class="item-span">{{ state.productData.scrap_qty }}</span>
          </div>
          <div class="line-space"></div>
          <div class="work-in-process-item" style="flex: 3">
            库存数量:
            <span class="item-span">{{ state.productData.stock_qty }}</span>
          </div>
        </div> -->

        <!-- <div class="work-in-process-item-root">
          <div class="work-in-process-item" style="flex: 2">
            创建人员:
            <span class="item-span">{{ state.productData.re_user_name }}</span>
          </div>
          <div class="line-space"></div>
          <div class="work-in-process-item" style="flex: 3">
            创建时间:
            <span class="item-span">{{ state.productData.re_time }}</span>
          </div>
        </div> -->
      </div>
      <!-- <el-tooltip
        v-if="state.hasToRight"
        content="报检单追溯"
        effect="dark"
        placement="right"
      >
        <div class="work-in-process-right">
          <el-icon><Right /></el-icon>
        </div>
      </el-tooltip> -->
    </div>
    <el-tooltip
      v-if="state.hasToBottom"
      content="向后追溯"
      effect="dark"
      placement="top"
    >
      <div class="work-in-process-top work-in-process-bottom" @click="toBottom">
        <el-icon><Bottom /></el-icon>
      </div>
    </el-tooltip>
  </div>
</template>
<script setup>
  import { Top, Bottom } from '@element-plus/icons-vue'
  import { getProductUsedApi } from '@/api/mes/trace_back'

  const getNode = inject('getNode')
  const state = reactive({
    isFinally: false,
    node: null,
    productData: {},
    hasToTop: true,
    hasToRight: true,
    hasToBottom: true,
  })
  const toBottom = async () => {
    if (!state.hasToBottom) return
    const bottomData = await getBottomData()
    if (
      !bottomData ||
      !Object.keys(bottomData) ||
      Object.keys(bottomData).length === 0
    ) {
      state.hasToBottom = false
      state.isFinally = true
      state.node.setData({ hasToBottom: false })
      return
    }
    state.node &&
      state.node.data &&
      state.node.data.toBottom(state.node, bottomData)
  }
  const getBottomData = async () => {
    const res = await getProductUsedApi({
      pkInv: state.productData.pkInv,
      invbatch: state.productData.invbatch,
      pkWh: state.productData.pkWh,
    })
    const dataMap = {}
    dataMap['reports'] = res.data
    return (res && res.data.length > 0 && dataMap) || {}
  }

  onMounted(() => {
    const node = getNode()
    state.node = node
    state.productData = node.data.productData
    state.hasToTop = node.data.hasToTop
    state.hasToBottom = node.data.hasToBottom
    state.hasToRight = node.data.hasToRight
    state.node.on('change:data', ({ current }) => {
      const { hasToTop, hasToBottom, hasToRight } = current
      state.hasToTop = hasToTop
      state.hasToRight = hasToRight
      state.hasToBottom = hasToBottom
    })
  })
</script>
<style lang="scss" scoped>
  .work-in-process-root {
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 220px;
    background-color: #98f5ff;
    border: 2px solid #e0e0e0;
    border-radius: 5px;
    .work-in-process-top {
      padding: 2px 0;
      font-size: 18px;
      font-weight: bold;
      color: #fff;
      text-align: center;
      cursor: pointer;
      border-bottom: 2px solid #fff;
      &:hover {
        background-color: #8ee5ee;
      }
    }
    .work-in-process-bottom {
      border-top: 2px solid #fff;
    }

    .work-in-process-right {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 100%;
      font-size: 18px;
      font-weight: bold;
      color: #ffffff;
      cursor: pointer;
      border-left: 2px solid #fff;
      &:hover {
        color: #ffffff;
        background-color: #fbd325;
      }
    }
    .work-in-process-title {
      padding: 3px 0;
      font-size: 16px;
      font-weight: bold;
      line-height: 26px;
      color: #ffffff;
      text-align: center;
      border-bottom: 1px solid #fff;
    }
    .work-in-process-content-root {
      display: flex;
      flex: 1;
      flex-direction: row;
    }
    .work-in-process-content {
      display: flex;
      flex: 1;
      flex-direction: column;
      .work-in-process-item-root {
        display: flex;
        flex: 1;
        flex-direction: row;
      }
      .work-in-process-item {
        display: flex;
        flex: 1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0 4px;
        .item-span {
          margin-left: 4px;
          font-weight: bold;
          color: #333;
        }
      }
      .line-space {
        width: 1px;
        height: 10px;
        margin: auto 0;
        background-color: #333;
      }
    }
  }
  .work-in-process-root-finally {
    background-color: #6495ed;
    .work-in-process-top {
      &:hover {
        background-color: #6495ed;
      }
    }
  }
</style>
